<template>
  <div class="login-view">
    <!-- 左侧装饰区域 -->
    <div class="login-decoration">
      <div class="decoration-content">
        <div class="brand-logo">
          <div class="logo-icon">📸</div>
          <h2 class="brand-name">家庭媒体管家</h2>
        </div>
        <p class="brand-tagline">珍藏每一个美好瞬间<br>让回忆永远温暖如初</p>
        <div class="feature-highlights">
          <div class="feature-item">
            <span class="feature-icon">🏠</span>
            <span class="feature-text">家庭共享空间</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">📱</span>
            <span class="feature-text">多端同步管理</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">🔒</span>
            <span class="feature-text">隐私安全保护</span>
          </div>
        </div>
      </div>

      <!-- 浮动装饰元素 -->
      <div class="floating-elements">
        <div class="float-item float-1"></div>
        <div class="float-item float-2"></div>
        <div class="float-item float-3"></div>
        <div class="float-item float-4"></div>
      </div>
    </div>

    <!-- 右侧登录表单 -->
    <div class="login-form-section">
      <div class="login-container">
        <div class="login-header">
          <h1 class="login-title">欢迎回来</h1>
          <p class="login-subtitle">请登录您的账户继续使用</p>
        </div>

        <form class="login-form" @submit.prevent="handleLogin">
          <div class="form-group">
            <label class="form-label" for="username">用户名或邮箱</label>
            <div class="input-wrapper">
              <span class="input-icon">👤</span>
              <input
                id="username"
                v-model="loginForm.username"
                :disabled="isLoading"
                class="form-input"
                placeholder="请输入用户名或邮箱"
                type="text"
              />
            </div>
          </div>

          <div class="form-group">
            <label class="form-label" for="password">密码</label>
            <div class="input-wrapper">
              <span class="input-icon">🔒</span>
              <input
                id="password"
                v-model="loginForm.password"
                :disabled="isLoading"
                :type="showPassword ? 'text' : 'password'"
                class="form-input"
                placeholder="请输入密码"
              />
              <button
                class="password-toggle"
                type="button"
                @click="showPassword = !showPassword"
              >
                {{ showPassword ? '🙈' : '👁️' }}
              </button>
            </div>
          </div>

          <div class="form-options">
            <label class="checkbox-wrapper">
              <input v-model="loginForm.remember" type="checkbox" />
              <span class="checkbox-custom"></span>
              <span class="checkbox-text">记住我</span>
            </label>
            <router-link class="forgot-link" to="/forgot-password">
              忘记密码？
            </router-link>
          </div>

          <button
            :disabled="isLoading || !isFormValid"
            class="login-btn"
            type="submit"
          >
            <span v-if="isLoading" class="loading-spinner">⏳</span>
            <span v-else>登录</span>
          </button>
        </form>

        <!-- 分割线 -->
        <div class="divider">
          <span class="divider-text">其他登录方式</span>
        </div>

        <!-- 社交登录 -->
        <div class="social-login">
          <button class="social-btn google-btn" @click="loginWithGoogle">
            <span class="social-icon">🔍</span>
            <span>Google</span>
          </button>
          <button class="social-btn wechat-btn" @click="loginWithWechat">
            <span class="social-icon">💬</span>
            <span>微信</span>
          </button>
        </div>

        <!-- 注册提示 -->
        <div class="register-prompt">
          <span class="register-text">还没有账号？</span>
          <router-link class="register-link" to="/register">
            立即注册
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { Notify } from '@opentiny/vue'

const router = useRouter()
const authStore = useAuthStore()

const isLoading = ref(false)
const showPassword = ref(false)
const loginForm = ref({
  username: '',
  password: '',
  remember: false
})

const isFormValid = computed(() => {
  return loginForm.value.username.trim() !== '' &&
         loginForm.value.password.trim() !== ''
})

const handleLogin = async () => {
  if (!isFormValid.value) {
    Notify({ type: 'error', message: '请填写完整的登录信息', position: 'top-right' })
    return
  }

  isLoading.value = true

  try {
    // 调用真实的登录API
    const result = await authStore.login({
      username: loginForm.value.username,
      password: loginForm.value.password
    })

    if (result.success) {
      // 登录成功，跳转到仪表板
      router.push('/dashboard')
    } else {
      // 登录失败，错误信息已在store中处理
      console.error('Login failed:', result.error)
    }
  } catch (error) {
    console.error('Login error:', error)
    Notify({ type: 'error', message: '登录失败，请稍后重试', position: 'top-right' })
  } finally {
    isLoading.value = false
  }
}

const loginWithGoogle = () => {
  console.log('Google 登录功能开发中...')
}

const loginWithWechat = () => {
  console.log('微信登录功能开发中...')
}
</script>

<style lang="scss" scoped>
.login-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 0.45fr;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

// 左侧装饰区域
.login-decoration {
  position: relative;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-8;
  overflow: hidden;

  .decoration-content {
    max-width: 400px;
    text-align: center;
    position: relative;
    z-index: 2;

    .brand-logo {
      margin-bottom: $spacing-8;

      .logo-icon {
        font-size: 4rem;
        margin-bottom: $spacing-4;
        opacity: 0.9;
      }

      .brand-name {
        font-size: $font-size-3xl;
        font-weight: $font-weight-bold;
        color: #4338ca;
        margin: 0;
        letter-spacing: -0.025em;
      }
    }

    .brand-tagline {
      font-size: $font-size-lg;
      color: #5b21b6;
      line-height: 1.6;
      margin-bottom: $spacing-8;
      opacity: 0.8;
    }

    .feature-highlights {
      display: flex;
      flex-direction: column;
      gap: $spacing-4;

      .feature-item {
        display: flex;
        align-items: center;
        gap: $spacing-3;
        padding: $spacing-3;
        background: rgba(255, 255, 255, 0.2);
        border-radius: $radius-lg;
        backdrop-filter: blur(10px);

        .feature-icon {
          font-size: $font-size-xl;
        }

        .feature-text {
          color: #4338ca;
          font-weight: $font-weight-medium;
        }
      }
    }
  }

  .floating-elements {
    position: absolute;
    inset: 0;

    .float-item {
      position: absolute;
      border-radius: $radius-full;
      background: rgba(255, 255, 255, 0.1);
      animation: gentleFloat 8s ease-in-out infinite;

      &.float-1 {
        width: 100px;
        height: 100px;
        top: 15%;
        left: 10%;
        animation-delay: 0s;
      }

      &.float-2 {
        width: 60px;
        height: 60px;
        top: 70%;
        right: 15%;
        animation-delay: 2s;
      }

      &.float-3 {
        width: 80px;
        height: 80px;
        bottom: 20%;
        left: 20%;
        animation-delay: 4s;
      }

      &.float-4 {
        width: 40px;
        height: 40px;
        top: 30%;
        right: 30%;
        animation-delay: 6s;
      }
    }
  }
}

// 右侧表单区域
.login-form-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-8;
  background: #ffffff;

  .login-container {
    width: 100%;
    max-width: 400px;

    .login-header {
      text-align: center;
      margin-bottom: $spacing-8;

      .login-title {
        font-size: $font-size-3xl;
        font-weight: $font-weight-bold;
        color: #1e293b;
        margin-bottom: $spacing-3;
        letter-spacing: -0.025em;
      }

      .login-subtitle {
        font-size: $font-size-base;
        color: #64748b;
        margin: 0;
        line-height: 1.5;
      }
    }

    .login-form {
      .form-group {
        margin-bottom: $spacing-6;

        .form-label {
          display: block;
          margin-bottom: $spacing-2;
          font-weight: $font-weight-medium;
          color: #374151;
          font-size: $font-size-sm;
        }

        .input-wrapper {
          position: relative;
          display: flex;
          align-items: center;

          .input-icon {
            position: absolute;
            left: $spacing-4;
            font-size: $font-size-base;
            opacity: 0.6;
            z-index: 1;
          }

          .form-input {
            width: 100%;
            padding: $spacing-4 $spacing-4 $spacing-4 $spacing-12;
            border: 2px solid #e2e8f0;
            border-radius: $radius-xl;
            font-size: $font-size-base;
            background: #f8fafc;
            transition: all 0.2s ease;
            color: #1e293b;

            &:focus {
              outline: none;
              border-color: #6366f1;
              background: #ffffff;
              box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
            }

            &::placeholder {
              color: #94a3b8;
            }

            &:disabled {
              opacity: 0.6;
              cursor: not-allowed;
            }
          }

          .password-toggle {
            position: absolute;
            right: $spacing-4;
            background: none;
            border: none;
            font-size: $font-size-base;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.2s ease;

            &:hover {
              opacity: 1;
            }
          }
        }
      }

      .form-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: $spacing-6;

        .checkbox-wrapper {
          display: flex;
          align-items: center;
          gap: $spacing-2;
          cursor: pointer;

          input[type="checkbox"] {
            display: none;
          }

          .checkbox-custom {
            width: 18px;
            height: 18px;
            border: 2px solid #d1d5db;
            border-radius: $radius-sm;
            position: relative;
            transition: all 0.2s ease;

            &::after {
              content: '✓';
              position: absolute;
              inset: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              font-size: 12px;
              font-weight: bold;
              opacity: 0;
              transition: opacity 0.2s ease;
            }
          }

          input:checked + .checkbox-custom {
            background: #6366f1;
            border-color: #6366f1;

            &::after {
              opacity: 1;
            }
          }

          .checkbox-text {
            font-size: $font-size-sm;
            color: #64748b;
          }
        }

        .forgot-link {
          color: #6366f1;
          text-decoration: none;
          font-size: $font-size-sm;
          font-weight: $font-weight-medium;
          transition: color 0.2s ease;

          &:hover {
            color: #4f46e5;
          }
        }
      }

      .login-btn {
        width: 100%;
        padding: $spacing-4;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        border: none;
        border-radius: $radius-xl;
        color: white;
        font-size: $font-size-base;
        font-weight: $font-weight-semibold;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $spacing-2;

        &:hover:not(:disabled) {
          transform: translateY(-1px);
          box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
        }

        &:active:not(:disabled) {
          transform: translateY(0);
        }

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          transform: none;
        }

        .loading-spinner {
          animation: spin 1s linear infinite;
        }
      }
    }

    .divider {
      position: relative;
      text-align: center;
      margin: $spacing-8 0 $spacing-6;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: #e2e8f0;
      }

      .divider-text {
        background: white;
        padding: 0 $spacing-4;
        color: #94a3b8;
        font-size: $font-size-sm;
        position: relative;
      }
    }

    .social-login {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: $spacing-3;
      margin-bottom: $spacing-6;

      .social-btn {
        padding: $spacing-3;
        border: 2px solid #e2e8f0;
        border-radius: $radius-lg;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $spacing-2;
        font-weight: $font-weight-medium;
        color: #64748b;

        &:hover {
          border-color: #cbd5e1;
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        &.google-btn:hover {
          border-color: #ea4335;
          color: #ea4335;
        }

        &.wechat-btn:hover {
          border-color: #1aad19;
          color: #1aad19;
        }

        .social-icon {
          font-size: $font-size-lg;
        }
      }
    }

    .register-prompt {
      text-align: center;
      color: #64748b;
      font-size: $font-size-sm;

      .register-text {
        margin-right: $spacing-1;
      }

      .register-link {
        color: #6366f1;
        text-decoration: none;
        font-weight: $font-weight-medium;
        transition: color 0.2s ease;

        &:hover {
          color: #4f46e5;
        }
      }
    }
  }
}

// 动画
@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(120deg);
  }
  66% {
    transform: translateY(5px) rotate(240deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 响应式设计
@media (max-width: $breakpoint-lg) {
  .login-view {
    grid-template-columns: 1fr;
  }

  .login-decoration {
    display: none;
  }

  .login-form-section {
    padding: $spacing-6;
  }
}

@media (max-width: $breakpoint-sm) {
  .login-form-section {
    padding: $spacing-4;

    .login-container {
      .login-header .login-title {
        font-size: $font-size-2xl;
      }

      .social-login {
        grid-template-columns: 1fr;
      }
    }
  }
}

// 暗色主题适配
[data-theme="dark"] {
  .login-view {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  }

  .login-decoration {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 50%, #6366f1 100%);

    .decoration-content {
      .brand-name {
        color: #a5b4fc;
      }

      .brand-tagline {
        color: #c7d2fe;
      }

      .feature-item {
        background: rgba(255, 255, 255, 0.1);

        .feature-text {
          color: #c7d2fe;
        }
      }
    }
  }

  .login-form-section {
    background: #1e293b;

    .login-container {
      .login-header {
        .login-title {
          color: #f1f5f9;
        }

        .login-subtitle {
          color: #94a3b8;
        }
      }

      .login-form {
        .form-label {
          color: #e2e8f0;
        }

        .input-wrapper .form-input {
          background: #334155;
          border-color: #475569;
          color: #f1f5f9;

          &:focus {
            background: #374151;
            border-color: #6366f1;
          }

          &::placeholder {
            color: #64748b;
          }
        }

        .checkbox-wrapper .checkbox-text {
          color: #94a3b8;
        }
      }

      .divider {
        &::before {
          background: #475569;
        }

        .divider-text {
          background: #1e293b;
          color: #64748b;
        }
      }

      .social-login .social-btn {
        background: #334155;
        border-color: #475569;
        color: #94a3b8;

        &:hover {
          border-color: #64748b;
          background: #3f4b5b;
        }
      }

      .register-prompt {
        color: #94a3b8;
      }
    }
  }
}
</style>
